<template>
    <!-- 供应商汇总评价列表 -->
    <div class="page">
        <div class="top">
            <div class="left">
                <el-button size="mini" @click="buttonAdd1()"
                    >分子公司新增汇总评价</el-button
                >
                <el-button size="mini" @click="buttonAdd2()"
                    >集团新增汇总评价</el-button
                >
            </div>
            <div class="right"></div>
        </div>
        <div class="list">
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                class="table"
                :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }"
                @cell-mouse-enter="cellMouseEnter"
                @cell-mouse-leave="cellMouseLeave"
                @selection-change="handleSelectionChange"
                v-sortTable="{
                    tableData: tableData,
                    _this: this,
                    ref: 'multipleTable'
                }"
            >
                <el-table-column show-overflow-tooltip label="操作">
                    <template slot-scope="scope">
                        <div>
                            <i
                                class="el-icon-edit"
                                style="cursor: pointer; font-size: 20px"
                                :class="{
                                    'icon-edit-active-color':
                                        MouseEnterId == scope.row.id
                                }"
                                @click="tableDbEdit(scope.row.id)"
                            ></i>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="机构名称" width="600">
                    <template slot-scope="scope">
                        <span
                            @click="articulars(scope.row.id, scope.row.isGroup)"
                            style="color: blue; cursor: pointer"
                        >
                            {{ scope.row.orgName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="evaluateDate"
                    label="评价日期"
                    width="250"
                    show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                    prop="summartDate"
                    label="汇总时间区间"
                    width="250"
                    show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                    prop="state"
                    label="状态"
                    width="220"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span>
                            {{
                                ['草稿', '审核中', '已审核'][scope.row.state]
                            }}</span
                        >
                    </template>
                </el-table-column>
                <el-table-column
                    prop="releasestate"
                    label="发布状态"
                    width="210"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <span>
                            {{
                                ['未发布', '发布'][scope.row.releasestate]
                            }}</span
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom">
            <ComPagination />
        </div>
    </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'

export default {
    components: {
        ComPagination
    },
    data () {
        return {
            tableData: [
                {
                    orgName: '', //工程分包商名称
                    evaluateDate: '', //评价日期
                    summartDate: '', //汇总时间区间
                    state: '', //状态
                    releasestate: '' //发布状态
                }
            ],
            MouseEnterId: 0
        }
    },
    created () {
        this.getData()
    },
    mounted () {},
    methods: {
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        //查询分包商列表数据
        getData () {
            this.$Ajax
                .httpPost({
                    url: '/outer/summary/listByEntity',
                    params: {
                        keyword: '',
                        limit: 10,
                        page: 1
                    }
                })
                .then(res => {
                    this.tableData = res.list
                })
        },
        //新增按钮
        buttonAdd1 () {
            this.$router.push('/filialeCollectAdds')
        },
        buttonAdd2 () {
            this.$router.push('/groupCollectAdds')
        },
        //详情
        articulars (id, isGroup) {
            console.log(id, isGroup)
            if (isGroup == 0) {
                this.$router.push({
                    path: '/filialeCollectParticulars',
                    query: { id }
                })
            } else {
                this.$router.push({
                    path: '/groupCollectParticulars',
                    query: { id }
                })
            }
        },
        //编辑
        tableDbEdit (id, isGroup) {
            console.log(id, isGroup)
            if (isGroup == 0) {
                this.$router.push({
                    path: '/filialeCollectEdits',
                    query: { id }
                })
            } else {
                this.$router.push({
                    path: '/groupCollectEdits',
                    query: { id }
                })
            }
        },
        handleSelectionChange (val) {
            this.multipleSelection = val
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgb(239, 242, 246);
    border: 1px solid #ccc;
    border-radius: 5px;
    .top {
        height: 50px;
        display: flex;
        background-color: #fff;
        justify-content: space-between;
        .left {
            flex: 1;
            ::v-deep.el-button--mini {
                margin-top: 10px;
                margin-left: 5px;
                color: #fff;
                background-color: rgb(122, 168, 24);
            }
        }
        .right {
            width: 300px;
        }
    }
    .list {
        flex: 1;
        margin-top: 10px;

        #iconEdit:hover {
            color: red;
        }
    }
    .bottom {
        height: 50px;
        padding-bottom: 20px;
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 6px; // 横向滚动条
        height: 10px; // 纵向滚动条
    }
    // 滚动条的滑块
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 5px;
    }
}
</style>
